<template>
  <div class="ui-stars">
    <span
      :class="['iconfont icon-star', number <= starNum ? 'active' : '']"
      v-for="number in 5"
      :key="number"
      :style="{ fontSize: size + 'px' }"
      @click="setStarNum(number)"
    ></span>
  </div>
</template>

<script>
export default {
  name: "MyStars",
  props: {
    num: {
      type: Number,
      default: 3,
    },
    size: {
      type: Number,
      default: 16,
    },
  },
  data() {
    return {
      starNum: this.num,
    };
  },
  methods: {
    setStarNum(number) {
      this.starNum = number;
      this.$emit("getStarNum", this.starNum);
    },
  },
};
</script>

<style lang="scss" scoped>
@font-face {
  font-family: "iconfont"; /* Project id 3061883 */
  src: url("//at.alicdn.com/t/font_3061883_asrz1t7hrxw.woff2?t=1640357772086")
      format("woff2"),
    url("//at.alicdn.com/t/font_3061883_asrz1t7hrxw.woff?t=1640357772086")
      format("woff"),
    url("//at.alicdn.com/t/font_3061883_asrz1t7hrxw.ttf?t=1640357772086")
      format("truetype");
}

.ui-stars {
  .iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #999;

    &.icon-star:before {
      content: "\e600";
    }

    &.active {
      color: #fcc33f;
    }
  }
}
</style>